<template>
  <div class="h-full">
    <SearchCom
      :searchList="searchConfig"
      @search="handleSearch"
      @reset="handleReset"
    />
    <div class="table-container">
      <!-- 操作按钮 -->
      <div class="operation-bar">
        <el-button type="primary" @click="editDiaVisible = true">新增菜品</el-button>
      </div>
      
      <el-table :data="tableData" style="width: 100%" border class="cover-table">
        <el-table-column prop="sellerId" label="商家ID" width="100" />
        
        <el-table-column prop="title" label="菜品信息" min-width="300">
          <template #default="scope">
            <div class="flex">
              <el-popover placement="right" width="226" trigger="hover">
                <div
                  class="bigImg"
                  :style="{
                    backgroundImage: `url(${scope.row.image})`,
                  }"
                ></div>
                <template #reference>
                  <div
                    class="goodImg"
                    :style="{
                      backgroundImage: `url(${scope.row.image})`,
                    }"
                  ></div>
                </template>
              </el-popover>

              <div class="ml10 flex_fdc_jcsb text-left">
                <div class="color-333333 line-2">{{ scope.row.name }}</div>
                <div>序号: {{ scope.row.serialNumber }}</div>
                <div>分类: {{ scope.row.category }}</div>
                <div>价格: ¥{{ scope.row.price }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="商家信息" min-width="200">
          <template #default="scope">
            <div>商家名称: {{ scope.row.sellerName }}</div>
            <div>地址: {{ scope.row.address }}</div>
            <div>联系人: {{ scope.row.contactPerson }}</div>
            <div>联系电话: {{ scope.row.contactPhone }}</div>
          </template>
        </el-table-column>
        
        <el-table-column label="菜品详情" min-width="200">
          <template #default="scope">
            <el-popover placement="top" width="300" trigger="hover">
              <template #default>
                <div class="intro-popover">
                  <div><strong>菜品详情:</strong></div>
                  <div>{{ scope.row.description }}</div>
                  <div class="mt10"><strong>购买须知:</strong></div>
                  <div>{{ scope.row.purchaseNotes }}</div>
                  <div class="mt10"><strong>菜品相册:</strong></div>
                  <div class="seller-gallery">
                    <div 
                      v-for="(img, index) in scope.row.gallery" 
                      :key="index" 
                      class="gallery-img"
                      :style="{backgroundImage: `url(${img})`}"
                    ></div>
                  </div>
                </div>
              </template>
              <template #reference>
                <el-button link type="primary">查看详情</el-button>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        
        <el-table-column label="销售数据" min-width="200">
          <template #default="scope">
            <div>发布时间: {{ scope.row.publishTime }}</div>
            <div>销量: {{ scope.row.salesVolume }}份</div>
            <div>库存: {{ scope.row.stock }}份</div>
            <div>状态: 
              <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
                {{ scope.row.status === '1' ? '在售' : '下架' }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button 
              link 
              type="primary" 
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-popconfirm
              title="确定要删除该菜品吗？"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    
    <EditDia v-model="editDiaVisible" :data="editData" />
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import SearchCom from "@/components/SearchCom.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import EditDia from "./edit.vue";

// 搜索配置
const searchConfig = ref([
  {
    label: "商家ID",
    key: "sellerId",
    type: "input",
  },
  {
    label: "菜品名称",
    key: "name",
    type: "input",
  },
  {
    label: "联系人",
    key: "contactPerson",
    type: "input",
  },
  {
    label: "联系电话",
    key: "contactPhone",
    type: "input",
  },
  {
    label: "菜品序号",
    key: "serialNumber",
    type: "input",
  },
  {
    label: "菜品分类",
    key: "category",
    type: "select",
    options: [
      { label: "热菜", value: "热菜" },
      { label: "凉菜", value: "凉菜" },
      { label: "主食", value: "主食" },
      { label: "汤品", value: "汤品" },
      { label: "甜点", value: "甜点" },
      { label: "饮品", value: "饮品" },
    ],
  },
  {
    label: "价格区间",
    key: "priceRange",
    type: "numberrange",
  },
  {
    label: "销量",
    key: "salesVolume",
    type: "number",
  },
  {
    label: "发布时间",
    key: "publishTime",
    type: "daterange",
    dateType: "daterange",
  },
]);
const editDiaVisible = ref(false);
const editData = ref({});
// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 模拟表格数据
const tableData = ref(
  Array.from({ length: 10 }, (_, index) => ({
    id: index + 1,
    name: `菜品${index + 1}`,
    serialNumber: `DISH${String(index + 1).padStart(4, '0')}`,
    category: ['热菜', '凉菜', '主食', '汤品', '甜点', '饮品'][index % 6],
    price: (Math.random() * 100 + 10).toFixed(2),
    image: `https://img-lang.55sld.com/channel1langimages/seller/goods/FazXTfI500MzGvRhxTA.jpg`,
    sellerId: `SELLER${String(index % 5 + 1).padStart(4, '0')}`,
    sellerName: `商家${index % 5 + 1}`,
    address: `北京市朝阳区建国路${88 + index}号`,
    contactPerson: `联系人${index % 5 + 1}`,
    contactPhone: `1391234${(index % 5).toString().padStart(4, '0')}`,
    description: "这是一道美味可口的菜品，采用新鲜的食材精心烹制而成。菜品口感鲜美，营养丰富，是一道不可多得的美食佳肴。",
    purchaseNotes: "1. 下单后30分钟内制作完成\n2. 支持堂食和外卖配送\n3. 过敏人群请慎重选择\n4. 图片仅供参考，请以实物为准",
    gallery: [
      `https://img-lang.55sld.com/channel1langimages/seller/goods/FazXTfI500MzGvRhxTA.jpg`,
      `https://img-lang.55sld.com/channel1langimages/seller/goods/FazXTfI500MzGvRhxTA.jpg`,
      `https://img-lang.55sld.com/channel1langimages/seller/goods/FazXTfI500MzGvRhxTA.jpg`,
    ],
    publishTime: `2023-${(index % 12 + 1).toString().padStart(2, '0')}-${(index % 28 + 1).toString().padStart(2, '0')}`,
    salesVolume: Math.floor(Math.random() * 1000),
    stock: Math.floor(Math.random() * 100 + 10),
    status: index % 7 === 0 ? "0" : "1", // 大部分为在售状态
  }))
);

// 处理搜索
const handleSearch = (formData) => {
  console.log("搜索条件:", formData);
  // 实际项目中这里应该调用API进行搜索
  ElMessage.success('搜索请求已发送');
};

// 处理重置
const handleReset = () => {
  console.log("表单已重置");
  // 重置后可能需要重新加载初始数据
  ElMessage.info('表单已重置');
};

// 编辑菜品
const handleEdit = (row) => {
  editDiaVisible.value = true;
  editData.value = row;
};

// 删除菜品
const handleDelete = (row) => {
  console.log("删除菜品:", row);
  // 实际项目中这里应该调用API进行删除
  const index = tableData.value.findIndex(item => item.id === row.id);
  if (index !== -1) {
    tableData.value.splice(index, 1);
    ElMessage.success(`菜品: ${row.name} 已删除`);
  }
};

// 处理页码变化
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  // 这里请求对应页的数据
};

// 处理每页数量变化
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  // 这里请求对应数量的数据
};
</script>

<style scoped lang="scss">
.table-container {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
}

.goodImg {
  display: inline-block;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px solid #e2e5f6;
  border-radius: 3px;
  background: #f8f8f8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bigImg {
  display: inline-block;
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ml10 {
  margin-left: 10px;
}

.flex {
  display: flex;
}

.flex_fdc_jcsb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text-left {
  text-align: left;
}

.line-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.operation-bar {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}

.intro-popover {
  max-height: 400px;
  overflow-y: auto;
}

.seller-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.gallery-img {
  width: 80px;
  height: 80px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

.mt10 {
  margin-top: 10px;
}
</style>
